import { Component, ReactNode } from "react";

class Hello extends Component {
  render() {
    return (
      <div>
        <h2>Hello, {this.props.count}</h2>
        <p>MSG: {this.props.msg}</p>
      </div>
    );
  }
}

class World extends Component {
  render() {
    return (
      <div>
        <h2>World, {this.props.count}</h2>
      </div>
    );
  }
}

/**
 * 创建一个高阶组件（函数）
 */
function withCount(WrappedComponent) {
  return class AddCount extends Component {
    render() {
      return <WrappedComponent count={1} />;
    }
  };
}

function withMsg(WrappedComponent) {
  return () => {
    return <WrappedComponent msg="我的天" />;
  };
}

const NewHello = withCount(Hello);
const NewWorld = withCount(World);

const NewNewHello = withMsg(Hello);
const NewNewNewHello = withMsg(NewHello);

export default class App extends Component {
  render() {
    return (
      <div>
        <h1>App</h1>
        <hr />

        <Hello />

        <hr />

        <NewHello />

        <hr />

        <NewWorld />

        <hr />

        <NewNewHello />

        <hr />

        <NewNewNewHello />
      </div>
    );
  }
}
